<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="author" content="Cassie">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="keywords" content="">
  <title>Night</title>
  <link rel="stylesheet" href=""> 
  <!-- link bootstrap -->
  <link rel="stylesheet" href="bootstrap.min.css"/>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"/></script>
  <script src="bootstrap.min.js"></script> 
  <style>
    li.on{
      background-color: olivedrab;
    }
    li.hover{
      background-color: olive;
    }
  </style>
 </head>
 <body>
   <div class="container">
    <h2>静态斑马线</h2>
    <ul id="quiet">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>
    <h2>动态斑马线</h2>
    <ul id="move">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>
    <h2>静动态斑马线</h2>
    <ul id="qmove">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>
   </div>
    <script>
    //静态斑马线
    let  lis = document.querySelectorAll('#quiet li');
    for (let i = 0; i < lis.length; i++) {
      if(i%2===0){
        lis[i].className = 'on';
      }
    }
    let lismove = document.querySelectorAll('#move li');
    for (let i = 0; i < lismove.length; i++) {
      lismove[i].onmouseover = function(){
        lismove[i].className = 'hover';
      }
      lismove[i].onmouseout = function(){
        lismove[i].className = '';
      }
    }
    //静动态斑马线

    let  lisqmove = document.querySelectorAll('#qmove li')
    for (let i = 0; i < lisqmove.length; i++) {
      // 静态
      if(i%2===0){
        lisqmove[i].className = 'on';
      }
      //动态
      lisqmove[i].onmouseover = function(){
        lisqmove[i].classList.add('hover');
      }
      lisqmove[i].onmouseout = function(){
        lisqmove[i].classList.remove ('hover');
      }
    }
		// for(var i = 0; i < lis.length; i++) {
		// 	// 设置动态斑马线
		// 	lis[i].onmouseover = function() {
		// 		this.style.backgroundColor = 'red'
		// 	}
		// 	lis[i].index = i // 设置当前li的属性index = i
		// 	lis[i].onmouseout = function() {
		// 		// 这里this.index 获取到上面赋值的 index = i 
		// 		if(this.index % 2 == 0) {
		// 			this.style.backgroundColor = 'pink'
		// 		}else {
		// 			this.style.backgroundColor = ''
		// 		}
		// 	}
		// 	// 设置静态斑马线
		// 	if(i % 2 == 0) {
		// 		lis[i].style.backgroundColor = 'pink'
		// 	}
		// }
		// 扩展：设置class设置的属性值和获取class设置的属性值
    
    </script>
 </body>
 </html>